<template>
	<view class="L-main">
		<view class="form">
			<view class="name">
				<view>
					<image src="../../static/workMessage/star.png"></image>
					<text>标替</text>
				</view>
				<input placeholder="请输入标题"/>
			</view>
			<view class="materials">
				<view class="title">
					<image src="../../static/workMessage/star.png"></image>
					<text>选择材料</text>
					<text style="color: #999999;font-size: 24rpx;margin-left: 20rpx;">可上传9个，单个文件10M以内大小</text>
				</view>
				<view class="photo">
					<u-upload ref="uUpload" index="idCard" :header="header" :action="action" :form-data="formData"
						@on-change="OnChange" :upload-text="'上传图片'" width="160" height="160" :max-count="6"
						:max-size="5 * 1024 * 1024">
					</u-upload>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: `${this.basePath}/api/comm/file/v1/upload`,
				formData: {
					dir: 'image',
					storage: 'fastdfs'
				},
				header: {
					ContentType: 'application/json;charset=utf-8',
					token: 'bearer ' + uni.getStorageSync('access_token')
				},
			}
		},
		methods: {
			OnChange(res, index, lists, name) {
				console.log(res, index, lists, name)
				if (lists[index].response.code != 200) {
					uni.showToast({
						title: lists[index].response.msg,
						icon: 'none'
					});
					this.$refs.uUpload.remove(index)
				}
			},
		}
	}
</script>

<style scoped lang="less">
.L-main{
	.form{
		padding: 0 30rpx;
		padding-top: 40rpx;
		.name{
			view{
				display: flex;
				align-items: center;
				image{
					width: 20rpx;
					height: 18rpx;
					margin-right: 6rpx;
				}
				text{
					font-size: 36rspx;
					color: #1a1a1a;
				}
			}
			input{
				width: 100%;
				height: 72rpx;
				font-size: 26rpx;
				border-bottom: 1rpx solid #f1f1f1;
			}
		}
		.materials{
			.title{
				margin-top: 50rpx;
				image{
					width: 20rpx;
					height: 18rpx;
					margin-right: 6rpx;
				}
				text{
					font-size: 36rspx;
					color: #1a1a1a;
				}
			}
			.photo{
				margin-top: 30rpx;
			}
		}
	}
}
</style>
